<template>
  <div class="main">
    <a-layout-header class="header">

      <div class="logo">
        <img :src="logo" alt="" @click="backHome">
      </div>
      <a-spin
        :spinning="loading"
        size="small"
      >
        <div class="right-content">

          <div class="currentUser" v-if="!loading">
            <span class="ant-pro-account-avatar">
              <span>欢迎你,  {{currentUser.name}}</span>
              <a-avatar size="default" :src="currentUser.avatar" class="antd-pro-global-header-index-avatar" />
            </span>

            <div class="currentAccount" id="components-popover-demo-placement">
              <a-popover placement="bottom">
                <template slot="content">
                  
                  <ul class="currentAccount-ul">
                    <li class="currentAccount-list" v-for="(item, index) in apps" :key="index">
                      <div class="account-list-left">
                        <a-avatar size="default" :src="item.avatarUrl || 'https://cfans-cdn.oss-cn-shenzhen.aliyuncs.com/images/getheadimg.jpeg'" class="antd-pro-global-header-index-avatar" />
                        <div>
                          <span class="account-name">
                            {{item.name}}
                          </span>
                          <span :class="currentApp == item.appid ? 'account-status' : ''">
                            {{currentApp == item.appid ? '当前帐号' : ''}}
                          </span>
                        </div>
                      </div>
                      <div class="account-list-right">
                        <a-icon type="swap" style="font-size: 18px; cursor: pointer;" @click="() => selectApp(item.appid)" />
                      </div>
                    </li>
                    
                  </ul>
                  
                </template>

                <div>
                  <a-avatar size="default" :src="current_app_avatar || 'https://cfans-cdn.oss-cn-shenzhen.aliyuncs.com/images/getheadimg.jpeg'" class="antd-pro-global-header-index-avatar" @click="e => e.preventDefault()"/>
                  <img :src="current_app_verifyType_logo(current_app_verifyType)" alt=""/>
                </div>
              </a-popover>
            </div>

            <span class="ant-pro-account-button">
              <a @click="handleLogout">退出登录</a>
            </span>
          </div>


          
        </div>




      </a-spin>
      

    </a-layout-header>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store/index'

export default {
  name: 'HeaderContent',
  props: {
    currentUser: Object
  },
  data () {
    return {
      logo: require('@/assets/logo-text.png')
    }
  },
  computed: {
    ...mapGetters(['apps', 'currentApp']),
    loading () {
      return !this.currentUser.name && !this.currentUser.avatar
    },
    current_app_avatar () {
      let avatar = ''
      this.apps.forEach(i => {
        if (i.appid == this.currentApp) {
          avatar = i.avatarUrl
        }
      })
      return avatar
    },
    current_app_verifyType() {
      let verifyType
      this.apps.forEach(i => {
        if (i.appid == this.currentApp) {
          verifyType = i.verifyType
          
        }
      })
      return verifyType
    },
    current_app_verifyType_logo() {
      return function(index) {
        if (index == -1) { return require('@/assets/isnotconfirm.jpg') }
        if (index == 0) { return require('@/assets/isConfirm.jpg') }
      }
    }
  },
  methods: {
    selectApp(app) {
      const _this = this;
      if (app == this.currentApp) { return ;}
      store.dispatch('SwitchApp', app).then(res => {
        if (res.code == 200) {
          _this.$message.success('切换成功')
        } else {
          _this.$message.error('切换失败')
        }
      })
    },
    handleLogout () {
      this.$confirm({
        title: `你确定要退出登录吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          return this.$store.dispatch('Logout').then(() => {
            this.$router.push({ name: 'Login' })
          })
        }
      })
    },
    backHome () {
      this.$router.push({name: 'Home'})
    }
  }
}
</script>

<style lang="less" scoped>
    .main {
      position: relative;
      background-color: #fff;
      height: 80px;
      box-shadow: 0 1px 4px 0 rgba(238, 238, 238, 0.5);
      color: #9A9A9A;
      font-size: 14px;
      .header {
          position: relative;
          background-color: #fff;
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 40px;
          justify-content: space-between;
          .logo {
              width: 120px;
              height: 44px;
              img {
                position: relative;
                // width: 44px;
                height: 48px;
                cursor: pointer;
              }
          }
          .right-content {
            position: relative;
            display: flex;
            .currentUser {
              position: relative;
              display: flex;
              .currentAccount {
                margin: 0 38px;
                div {
                  position: relative;
                  .antd-pro-global-header-index-avatar {
                    width: 44px;
                    height: 44px;
                    margin-right: 5px;
                    cursor: pointer;
                  }
                  img {
                    position: absolute;
                    height: 16px;
                    bottom: -8px;
                    left: 2px;
                  }
                }
              }
              .ant-pro-account-avatar {
                // margin-right: 50px;
                .antd-pro-global-header-index-avatar {
                  width: 44px;
                  height: 44px;
                }
                span {
                  margin-right: 12px;
                }
              }
              .ant-pro-account-button a{
                color: #9A9A9A
              }
              .ant-pro-account-button a:hover{
                text-decoration: underline;
                color: #07C160
              }
              
            }
            
          }
          
      }
    }

    .currentAccount-ul {
      width: 200px;
    
      .currentAccount-list {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        border-radius: 5px;
        .account-list-left {
          position: relative;
          display: flex;
          height: 100%;
          > div {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .account-status {
              border-radius: 55px;
              background-color: #eee;
              height: 13px;
              line-height: 13px;
              text-align: center;
              font-size: 6px;
              color: #a39d9d
            }
          }
          .antd-pro-global-header-index-avatar {
            width: 44px;
            height: 44px;
            margin-right: 5px;
          }
        }
        .account-list-right {
          position: relative;
          height: auto;
          display: flex;
          align-items: center;
        }
      }
      .currentAccount-list:hover {
        background-color: rgba(226, 226, 226, 0.3);
      }
    }
    .currentAccount-ul li:not(:last-child) { 
      margin-bottom: 10px;
    }
</style>
